<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动</title>

</head>

<body>
    <header>
        <ul>
            <li class="active">跑步</li>
            <li>骑行</li>
            <li>课程训练</li>
        </ul>
    </header>
    <main>
        <div class="run active">
            <nav>
                <h3>目前累积跑步距离:</h3>
                <p><span>999.99</span>公里</p>
            </nav>
            <aside>
                <div class="img">
                    <ul>
                        <li class="active">户外跑</li>
                        <li>燃脂跑</li>
                        <li>跑步机</li>
                    </ul>
                    <a href="#"><span>GO</span></a>
                    <ul>
                        <li>1</li>
                        <li>设置目标&gt;</li>
                        <li>1</li>
                    </ul>
                </div>
                <section>
                    <div>
                        <h2>跑步路线</h2>
                        <p>使用跑步路线, 邂逅附近的同行者</p>

                    </div>
                    <span class="iconfont icon-rightarrow"></span>
                </section>
            </aside>
        </div>
        <div class="cycling">
            <nav>
                <h3>目前累积跑步距离:</h3>
                <p><span>999.99</span>公里</p>
            </nav>
            <aside>
                <div class="img">
                    <!-- <ul>
                        <li class="active">户外跑</li>
                        <li>燃脂跑</li>
                        <li>跑步机</li>
                    </ul> -->
                    <a href="#"><span>GO</span></a>
                    <ul>
                        <li>1</li>
                        <li></li>
                        <li>1</li>
                    </ul>
                </div>
                <section>
                    <div>
                        <h2>骑行路线</h2>
                        <p>使用骑行路线, 邂逅附近的骑行达人</p>

                    </div>
                    <span class="iconfont icon-rightarrow"></span>
                </section>
            </aside>
        </div>
        <div class="training">
            <h2>最新课程</h2>

            <!-- <nav>
                    <img src="../../assets/imgs/course-img02.png" alt="">
                    <aside>
                        <h2>巧克力腹肌雕刻</h2>
                        <p>一场痛快淋漓的父级撕裂体验, 虐出你的巧克力腹肌 !</p>
                    </aside>
                </nav> -->
            <ul id="ol"></ul>
            <h2>课程</h2>
            <ul id="ul">
                <!-- <a href="training.html">
                    <li>
                        <h2>徒手胸肌训练进阶</h2>
                        <p>男生专属变式俯卧撑训练, 在家也能练出钢铁般的胸肌</p>
                    </li>
                </a>
                <a href="training.html">
                    <li>
                        <h2>徒手胸肌训练进阶</h2>
                        <p>男生专属变式俯卧撑训练, 在家也能练出钢铁般的胸肌</p>
                    </li>
                </a>
                <a href="training.html">
                    <li>
                        <h2>徒手胸肌训练进阶</h2>
                        <p>男生专属变式俯卧撑训练, 在家也能练出钢铁般的胸肌</p>
                    </li>
                </a> -->
            </ul>
        </div>
    </main>
</body>

</html>